<template>
    <h1>{{ msg }}</h1>
	<div class="nav-tab">
		<router-link to="/axios">Axios</router-link>
		<router-link to="/vue-route">VueRoute</router-link>
		<router-link to="/pinia">Pinia</router-link>
		<router-link to="/less">Less</router-link>
		<router-link to="/mock">Mock</router-link>
	</div>
    <div class="card-test">
	   <router-view/>
    </div>
	
    <p class="read-the-docs">Click on the Vite and Vue logos or other technologies below to learn more</p>
</template>

<script setup lang="ts">
import {ref} from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)
</script>

<style scoped lang="less">
.nav-tab{
	display: flex;
	flex-direction:row;
	justify-content: space-around;
	a{
		color: #41B883;
		cursor: pointer;
		font-family: "Microsoft JhengHei";
		width: 100px;
		height: 30px;
		line-height: 30px;
		transition: all 0.8s linear;
	}
    a:hover{
        color: #FFBD15;
        background: #9a60fe;
    }
}

.card-test{
	width: 100%;
	height: 500px;
    //background: lemonchiffon;
    margin: 0 auto;
}


</style>
